<!--
 * @Description: 第三方授权
 * @Autor: zhangzhanhua
 * @Date: 2021-11-16 15:15:01
 * @LastEditors: zhangyongbing
 * @LastEditTime: 2022-05-07 18:24:20
-->
<template>
	<div class="exThirdAuth">
		<el-tabs type="border-card" v-model="activeTab" @tab-click="handleClick">
			<el-tab-pane label="第三方授权" name="first">
				<div class="searchTop">
					<div class="topContent">
						<div class="searchContent">
							<el-input
								class="others"
								size="mini"
								v-model="searchForm.thirdFullName"
								placeholder="第三方授权全称"
								clearable
							></el-input>
						</div>
						<div class="searchContent">
							<el-button class="search_btn" type="primary" icon="el-icon-search" size="mini" @click="getTableList()">
								查询
							</el-button>
							<el-button icon="el-icon-refresh-right" size="mini" @click="reload">重置</el-button>
						</div>
					</div>
					<div class="leftIcon">
						<el-tooltip
							class="item"
							effect="dark"
							content="关联权限列表"
							placement="top"
							v-if="menuArr.includes('关联权限查询')"
						>
							<el-button class="editBtn" size="mini" @click="manage('list')">
								<i class="iconfont icon-1-09" style="font-size: 12px"></i>
							</el-button>
						</el-tooltip>
						<el-tooltip class="item" effect="dark" content="新增" placement="top" v-if="menuArr.includes('新增')">
							<el-button class="editBtn" icon="el-icon-plus" size="mini" @click="manage('add')"></el-button>
						</el-tooltip>
						<el-tooltip class="item" effect="dark" content="编辑" placement="top" v-if="menuArr.includes('编辑')">
							<el-button
								size="mini"
								icon="el-icon-edit-outline"
								class="editBtn"
								@click="manage('edit')"
								:disabled="!rowId"
							></el-button>
						</el-tooltip>
						<el-tooltip class="item" effect="dark" content="删除" placement="top" v-if="menuArr.includes('删除')">
							<el-button
								size="mini"
								icon="el-icon-delete"
								class="deleteBtn"
								@click="manage('delete')"
								:disabled="!rowId"
							></el-button>
						</el-tooltip>
					</div>
				</div>
				<div class="tableContent">
					<BaseTable
						:loading="isLoading"
						:data="tableList"
						:tableHeight="height"
						:columns="columns"
						:pagination="queryall"
						@size-change="sizeChange"
						@current-change="pageChange"
						@details="getRowData"
					></BaseTable>
				</div>
				<el-drawer
					:title="type == 'add' ? '新增第三方授权信息' : '编辑第三方授权信息'"
					:visible.sync="managePageShow"
					direction="rtl"
					size="30%"
					:append-to-body="true"
				>
					<managePage :parentId="rowId" v-if="managePageShow" :close="close" :type="type"></managePage>
				</el-drawer>
				<el-drawer title="关联权限列表" :visible.sync="authorityShow" direction="rtl" size="50%" :append-to-body="true">
					<authorityList :parentId="rowId" v-if="authorityShow"></authorityList>
				</el-drawer>
			</el-tab-pane>
			<el-tab-pane label="单点登录授权" name="two">
				<div class="searchTop">
					<div class="topContent">
						<div class="searchContent">
							<el-input class="others" size="mini" v-model="searchForm.thirdFullName" placeholder="全称" clearable></el-input>
						</div>
						<div class="searchContent">
							<el-button class="search_btn" type="primary" icon="el-icon-search" size="mini" @click="getTableList()">
								查询
							</el-button>
							<el-button icon="el-icon-refresh-right" size="mini" @click="reload">重置</el-button>
						</div>
					</div>
					<div class="leftIcon">
						<!-- <el-tooltip
							class="item"
							effect="dark"
							content="关联权限列表"
							placement="top"
							v-if="menuArr.includes('关联权限查询')"
						>
							<el-button class="editBtn" size="mini" @click="manage('list')">
								<i class="iconfont icon-1-09" style="font-size: 12px"></i>
							</el-button>
						</el-tooltip> -->
						<el-tooltip class="item" effect="dark" content="新增" placement="top" v-if="menuArr.includes('新增')">
							<el-button class="editBtn" icon="el-icon-plus" size="mini" @click="manage('add')"></el-button>
						</el-tooltip>
						<!-- <el-tooltip class="item" effect="dark" content="编辑" placement="top" v-if="menuArr.includes('编辑')">
							<el-button
								size="mini"
								icon="el-icon-edit-outline"
								class="editBtn"
								@click="manage('edit')"
								:disabled="!rowId"
							></el-button>
						</el-tooltip>
						<el-tooltip class="item" effect="dark" content="删除" placement="top" v-if="menuArr.includes('删除')">
							<el-button
								size="mini"
								icon="el-icon-delete"
								class="deleteBtn"
								@click="manage('delete')"
								:disabled="!rowId"
							></el-button>
						</el-tooltip> -->
					</div>
				</div>
				<div class="tableContent">
					<BaseTable
						:loading="isLoading"
						:data="tableList"
						:tableHeight="height"
						:columns="columnsTwo"
						:pagination="queryall"
						@size-change="sizeChange"
						@current-change="pageChange"
						@details="getRowData"
					></BaseTable>
				</div>
				<el-drawer
					:title="type == 'add' ? '第三方系统新增信息' : '第三方系统编辑信息'"
					:visible.sync="managePageShowTwo"
					direction="rtl"
					size="30%"
					:append-to-body="true"
				>
					<singleSignOn v-if="managePageShowTwo" :close="close" :type="type" :rowId="rowId"></singleSignOn>
				</el-drawer>
				<el-drawer title="账号绑定明细" :visible.sync="authorityShowTwo" direction="rtl" size="70%" :append-to-body="true">
					<bindingDetails :detailRow="detailRow" :parentId="rowId" v-if="authorityShowTwo"></bindingDetails>
				</el-drawer>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
import BaseTable from "@/components/BaseTable/index"
import managePage from "./subpage/managePage" //增改页面
import authorityList from "./subpage/authorityList" //关联权限列表

import singleSignOn from "./subpage/singleSignOn" // 单点登录 新增编辑
import bindingDetails from "./subpage/bindingDetails" // 单点登录 新增编辑

export default {
	name: "exThirdAuth",
	components: {
		BaseTable,
		managePage,
		authorityList,
		singleSignOn,
		bindingDetails,
	},
	computed: {
		// 表格高度
		height: function () {
			return this.$store.state.tableHeight - 100
		},
	},
	data() {
		return {
			activeTab: "first",
			isLoading: false, //表格loading
			rowId: "", //列表id
			searchForm: {
				thirdFullName: "", //第三方授权名称
			},
			// 分页数据
			queryall: {
				totalNum: 10,
				startpage: 1,
				pagesize: 15,
			},
			// 表格数据
			tableList: [],
			// 表格colums
			columns: [
				{
					prop: "thirdFullName",
					label: "第三方全称",
				},
				{
					prop: "thirdName",
					label: "第三方简称",
				},
				{
					prop: "appId",
					label: "商户ID",
					width: 170,
				},
				{
					prop: "appSecret",
					label: "商户秘钥",
					width: 170,
					tooltip: true,
					render: (h, params) => {
						return h(
							"el-tooltip",
							{
								props: {
									placement: "top",
									content: params.row.appSecret,
								},
							},
							[h("div", params.row.appSecret)]
						)
					},
				},
				{
					label: "状态",
					render: (h, params) => {
						let name = params.row.status == "1" ? "停用" : "启用"
						return h(
							"el-tag",
							{
								props: {
									type: params.row.status == "1" ? "danger" : "success",
									size: "mini",
								},
							},
							name
						)
					},
				},
				{
					prop: "remark",
					label: "备注",
				},
				{
					prop: "createName",
					label: "创建人",
				},
				{
					prop: "createTime",
					label: "创建时间",
				},
				{
					prop: "updateName",
					label: "更新人",
				},
				{
					prop: "updateTime",
					label: "更新时间",
				},
			],
			managePageShow: false, //是否展示新增或编辑
			type: "", //状态,新增或编辑
			authorityShow: false, //是否打开关联权限列表
			menuArr: [], //权限列表
			columnsTwo: [
				{
					prop: "fullName",
					label: "第三方系统全称",
					width: 120,
				},
				{
					prop: "nameEn",
					label: "英文简称",
				},
				{
					prop: "authUrl",
					label: "授权页面URL",
					width: 320,
				},
				{
					prop: "verityUrl",
					label: "鉴权URL",
					width: 320,
				},
				{
					prop: "jumpUrl",
					label: "跳转页面URL",
					width: 320,
				},
				// {
				// 	prop: "createName",
				// 	label: "创建人",
				// 	width: 80,
				// },
				// {
				// 	prop: "createTime",
				// 	label: "创建时间",
				// 	width: 150,
				// },
				// {
				// 	prop: "updateName",
				// 	label: "更新人",
				// 	width: 80,
				// },
				// {
				// 	prop: "updateTime",
				// 	label: "更新时间",
				// 	width: 150,
				// },
				{
					label: "操作",
					fixed: "right",
					align: "center",
					width: 160,
					render: (h, params) => {
						return h(
							"div",
							{
								calss: "btnClass",
							},
							[
								h("el-button", {
									props: {
										size: "mini",
									},
									style: {
										// marginRight: "10px",
									},
									domProps: {
										// 添加标签,使用自己引入的iconfont图标
										innerHTML: `<span style='color:#0B6CD6;><i class='iconfont icon-1-07'></i><span  style='padding-left:5px;'>编辑</span></span>`,
									},
									on: {
										click: () => {
											click: this.getRowData(params.row), this.manage("edit")
										},
									},
								}),
								h("el-button", {
									props: {
										size: "mini",
										// disabled: params.row.delFlag == "1" ? true : false,
									},
									style: {
										// marginRight: "10px",
									},
									domProps: {
										// 添加标签,使用自己引入的iconfont图标
										// innerHTML:"<i class='iconfont icon-liebiaotubiao_liebiao' style='color:rgb(130, 49, 142)'></i>列表"
										innerHTML: `<span style='color:#9420A8;><i class='iconfont icon-1-09'></i><span  style='padding-left:5px;'>列表</span></span>`,
									},
									on: {
										click: () => {
											click: this.getRowData(params.row), this.manage("list")
										},
									},
								}),
								h("el-button", {
									props: {
										size: "mini",
									},

									domProps: {
										// 添加标签,使用自己引入的iconfont图标
										// innerHTML: `<i class="iconfont icon-tubiao_liebiaoshanchu" style="color:#DA2821"></i> 删除`
										innerHTML: `<span style='color:#F75E5E;><i class='iconfont icon-1-08'></i><span  style='padding-left:5px;'>删除</span></span>`,
									},
									on: {
										click: () => {
											click: this.getRowData(params.row), this.delExThirdAuth()
										},
									},
								}),
							]
						)
					},
				},
			],
			managePageShowTwo: false,
			authorityShowTwo: false,
			detailRow: {},
		}
	},
	async activated() {
		var menuArr = []
		var menuId = ""
		if (localStorage.getItem("menuArr")) {
			menuArr = JSON.parse(localStorage.getItem("menuArr"))
		}
		menuArr.map(item => {
			item.children.map(v => {
				if (window.location.href.includes(v.url)) {
					menuId = v.id
				}
			})
		})

		if (menuId) {
			this.menuArr = []
			await this.$http
				.get(`/${this.$ServiceName}/api/external/sysmenubtn/listresourcebtnbyid?menuId=${menuId}`, { timeout: 30000 })
				.then(res => {
					res.data.data.map(item => {
						this.menuArr.push(item.resourceName)
					})
				})
				.catch(error => {})
		}
		if (this.$store.state.app.searchResouce == "menu") {
			//重置
			this.reload()
			this.activeTab = "first"
			//获取表格数据
			this.getTableListData()
		}
	},
	created() {},
	mounted() {},
	methods: {
		/**
		 * @Author: zhangyongbing
		 * @description:
		 * @param {*}
		 * @return {*}
		 */
		// excelFun()
		/**
		 * @Author: zhangyongbing
		 * @description:
		 * @param {*}
		 * @return {*}
		 */
		handleClick(tab, e) {
			// 0 第三方授权
			if (tab.index == "0") {
				//重置
				this.reload()
				//获取表格数据
				this.getTableListData()
			} else {
				// 1 单点登录
				//重置
				this.reload()
				//获取表格数据
				this.getTableListDataTwo()
			}
		},
		/**
		 * @Author: zhangyongbing
		 * @description: 单点登录 表格数据
		 * @param {*}
		 * @return {*}
		 */
		async getTableListDataTwo() {
			this.isLoading = true
			let data = [],
				tableData = [],
				params = {
					fullName: this.searchForm.thirdFullName,
					startpage: this.queryall.startpage,
					pagesize: this.queryall.pagesize,
				}
			const res = await this.$http.get(`/${this.$ServiceName}/api/external/dd_third_system/${this.$version}/list_all`, {
				params: params,
			})
			if (res.data.success) {
				data = res.data.data
				if (data.pages) {
					tableData = data.pages
					this.queryall.totalNum = data.totalNum
				}
			}
			this.tableList = tableData
			this.isLoading = false
		},
		/**
		 * @description: 获取一行数据
		 * @param {*}
		 * @return {*}
		 * @author: zhangzhanhua
		 */
		getRowData(val) {
			this.rowId = val.id //赋值当前行id
			this.detailRow = val
		},
		/**
		 * @description: 删除第三方授权
		 * @param {*}
		 * @return {*}
		 * @author: zhangzhanhua
		 */
		delExThirdAuth() {
			let _this = this,
				url = `/${this.$ServiceName}/api/external/dd_third_system/${this.$version}/delete_by_id`
			if (this.activeTab == "first") {
				url = `/${this.$ServiceName}/api/external/exthirdauth/${this.$version}/deletebyid`
			}
			_this
				.$confirm("确认删除该条数据?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				})
				.then(() => {
					_this.$http
						.delete(url, {
							params: {
								id: this.rowId, //当前行id
							},
						})
						.then(res => {
							if (res.data.success) {
								_this.$message.success(res.data.msg)
								if (_this.activeTab == "first") {
									_this.getTableListData()
								} else {
									_this.getTableListDataTwo()
								}
							} else {
								_this.$message.error(res.data.msg)
							}
						})
				})
				.catch(() => {})
		},
		/**
		 * @description: 关闭新增
		 * @param {*}
		 * @return {*}
		 * @author: zhangzhanhua
		 */
		close() {
			this.managePageShow = false
			this.managePageShowTwo = false

			if (this.activeTab == "first") {
				this.getTableListData()
			} else {
				this.getTableListDataTwo()
			}
		},
		/**
		 * @description: 管理增删改按钮
		 * @param {*}
		 * @return {*}
		 * @author: zhangzhanhua
		 */
		manage(type) {
			// 删除或编辑时需要选中状态
			if (type == "edit" || type == "delete" || type == "list") {
				if (!this.rowId) {
					this.$message.error("请选择一条数据")
					return
				}
			}
			this.type = type //状态
			if (type == "add") {
				//新增打开弹窗
				if (this.activeTab == "first") {
					this.managePageShow = true
				} else {
					this.managePageShowTwo = true
				}
				return
			}
			if (type == "edit") {
				if (this.activeTab == "first") {
					this.managePageShow = true
				} else {
					this.managePageShowTwo = true
				}
				return
			}
			if (type == "delete") {
				//删除
				this.delExThirdAuth() //删除函数
				return
			}
			if (type == "list") {
				//权限列表
				if (this.activeTab == "first") {
					this.authorityShow = true
				} else {
					this.authorityShowTwo = true
				}
				return
			}
		},
		/**
		 * @description: 页数改变
		 * @param {*} val
		 * @return {*}
		 * @author: zhangzhanhua
		 */
		sizeChange(val) {
			this.queryall.startpage = 1
			this.queryall.pagesize = val
			if (this.activeTab == "first") {
				this.getTableListData()
			} else {
				this.getTableListDataTwo()
			}
		},
		/**
		 * @description: 页码改变
		 * @param {*} val
		 * @return {*}
		 * @author: zhangzhanhua
		 */
		pageChange(val) {
			this.queryall.startpage = val
			if (this.activeTab == "first") {
				this.getTableListData()
			} else {
				this.getTableListDataTwo()
			}
		},

		/**
		 * @Author: gonghairun
		 * @description: 重制
		 * @param {*}
		 * @return {*}
		 */
		reload() {
			this.searchForm = {
				thirdname: "", //第三方授权名称
			}
			this.queryall = {
				totalNum: 10,
				startpage: 1,
				pagesize: 15,
			}
		},

		/**
		 * @description: 查询
		 * @param {*}
		 * @return {*}
		 * @author: zhangzhanhua
		 */
		getTableList() {
			this.queryall.startpage = 1
			if (this.activeTab == "first") {
				this.getTableListData()
			} else {
				this.getTableListDataTwo()
			}
		},
		/**
		 * @Author: gonghairun
		 * @description: 获取列表明细数据
		 * @param {*}
		 * @return {*}
		 */
		getTableListData() {
			this.rowId = "" //重获数据时清空rowId
			this.detailRow = {}
			this.isLoading = true
			let params = Object.assign(this.searchForm, this.queryall)
			delete params.totalNum
			this.$http
				.get(`/${this.$ServiceName}/api/external/exthirdauth/${this.$version}/listall`, { params: params })
				.then(res => {
					this.isLoading = false
					if (res.data.success) {
						this.queryall.totalNum = res.data.data.totalNum
						this.tableList = res.data.data.pages
					} else {
						this.queryall.totalNum = 0
						this.tableList = []
					}
				})
				.catch(err => {
					this.isLoading = false
				})
		},
	},
}
</script>

<style lang="less" scoped>
.exThirdAuth {
	width: 100%;
	height: 100%;
	.searchTop {
		min-height: 50px;
		background-color: #f5f7fa;
		border-radius: 0px;
		font-size: 14px;
		color: #606266;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20px;
		border: 1px solid #eaeaea;
		border-bottom: none;
		box-sizing: border-box;
		.topContent {
			width: 700px;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			height: 50px;
		}
		.leftIcon {
			min-width: 206px;
			text-align: right;
		}
		.heightLevel {
			position: absolute;
			top: 50px;
			left: 0;
			width: 100%;
			z-index: 100;
			background: #f5f7f9;
			padding: 0 20px;
		}
		.searchContent {
			margin-right: 20px;
			.others {
				width: 153px;
			}
		}
	}
	.tableContent {
		width: 100%;
		height: calc(100% - 50px);
	}
}
/deep/.el-table__body td {
	border-right: none;
}
/deep/.el-table__footer-wrapper {
	margin-top: 10px;
}
/deep/ .el-drawer__body {
	background-color: #f5f7fa;
}
/deep/ .el-drawer__header {
	background-color: #f5f7fa;
	margin: 0;
	// padding-bottom: 10px;
	padding: 15px 0px 15px 15px;
	border-bottom: 1px solid #eaeaea;
}
</style>
